<template>
	<div class="">
		<div class="list">
			<div class="item" @click="toLibrary">
				<img src="@/assets/资源管理系统/图书馆 (1).png" alt="" />
				<div>图书馆管理</div>
			</div>
			<div class="item" @click="toLaboraty">
				<img src="@/assets/资源管理系统/科研系统 (1).png" alt="" />
				<div>实验室管理</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import router from "@/router";
	function toLibrary (){
		router.replace({path:"/Library"})
	}
	function toLaboraty (){
		router.replace({path:"/Laboratory"})
	}
</script>

<style scoped lang="scss">
	.list{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.item{
			width:400px;
			height: 400px;
			margin-top:100px;
			border-radius: 32px;
			background-color: rgb(151, 202, 249);
			box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-around;
			color: #fff;
			font-size: 42px;
			transition-duration:1s;
			&:hover{
				cursor: pointer;
				transform: scale(1.05);
			}
			img{
				width:110px;
				height: 110px;
			}
		}
	}
</style>